<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闲云公子 日记</title>
    <link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/diary.css">
</head>
<body>
<div id="to-top" class="selected">
    <span class="glyphicon glyphicon-plane"></span>
</div>
<div id="music">
    <span class="glyphicon glyphicon-music"></span>
</div>
<div id="nav">
    <div class="wrapper">
        <div id="nav-left">
            <div id="nav-author">
                <div class="img-box">
                    <img src="img/top-nav.jpg" alt="">
                    <!--为何此处引入img时不能写为../img/001.jpg?而css引入窗体背景时却需要-->
                </div>
            </div>
            <div class="nav-left  homepages">
                <span class="glyphicon glyphicon-home"></span>
                <span>主页</span>
                <div id="tri-angle"></div>
            </div>
            <div class="nav-left">
                <span class="glyphicon glyphicon-transfer"></span>
                <span>动态</span>
            </div>
            <div class="nav-left">
                <span class="glyphicon glyphicon-heart"></span>
                <span>亲密度&nbsp;54</span>
            </div>
        </div>
        <div id="nav-sub">
            <div class="nav-main-left">
                <div class="nav-img-box">
                    <img src="img/top-nav.jpg" alt="">
                </div>
                <p>主页</p>
            </div>
            <div class="nav-main-right">
                <ul>
                    <li class="nav-right-box">
                        <div>
                            <div class="nav-img-box">
                                <img src="img/top-nav.jpg" alt="">
                            </div>
                            <p>动态</p>
                        </div>
                        <div>
                            <div class="nav-img-box">
                                <img src="img/top-nav.jpg" alt="">
                            </div>
                            <p>日记</p>
                        </div>
                        <div>
                            <div class="nav-img-box">
                                <img src="img/top-nav.jpg" alt="">
                            </div>
                            <p>相册</p>
                        </div>
                        <div>
                            <div class="nav-img-box">
                                <img src="img/top-nav.jpg" alt="">
                            </div>
                            <p>音乐</p>
                        </div>
                    </li>
                    <li class="nav-right-box">
                        <div>
                            <div class="nav-img-box">
                                <img src="img/top-nav.jpg" alt="">
                            </div>
                            <p>留言板</p>
                        </div>
                        <div>
                            <div class="nav-img-box">
                                <img src="img/top-nav.jpg" alt="">
                            </div>
                            <p>个人档</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="nav-right">
            <div>音乐播放</div>
            <div id="nav-search">
                <input   type="text" placeholder=" 用户/应用/动态">
                <span class="glyphicon glyphicon-search"></span>
            </div>
            <div>返回个人中心</div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<div id="head" >
    <div id="player">
        <audio src="music/ideal.mp3" controls="controls" style="width:170px;" preload="true">
        </audio>
    </div>
    <div id="top" class="wrapper">
        <div id="head-img-box">
            <img src="img/top-nav.jpg" alt="">
        </div>
        <div id="head-content">
            <h1>闲云公子</h1>
            <p>默。</p>
        </div>
    </div>
    <div id="today">
        <div id="local">local</div>
        <div id="weather">weather</div>
        <div id="date">d</div>
    </div>
</div>
<div id="mid-nav" class="wrapper">
    <div id="right-box" class="wrapper">
        <div id="tag">
            <ul>
                <li class="selected"><a href="#tag1">动态</a></li>
                <li><a href="#tag2">日记</a></li>
                <li><a href="#tag3">相册</a></li>
                <li><a href="#tag4">音乐</a></li>
                <li><a href="#tag5">留言板</a></li>
                <li><a href="#tag6">个人档</a></li>
            </ul>
        </div>

    </div>
</div>
<div id="footer" >
    <div class="wrapper">
        <p>I hope everybody here is happy.</p>
        <p><span></span></p>
    </div>
</div>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>